<template>
     <div class="useract hotword" id="emotion" style="height:400px"></div>
</template>
<script>
 import echarts from 'echarts'
 import api from '../../api/index.js'
export default {
  data:function(){
      return{
           chart: null,
           emodata:[],
           emovalue:[]
      }
  },
  created:function(){
    this.$nextTick(() => {
      this.drawEmo('emotion')
    })
  },
  methods:{
    drawEmo(id){
      this.chart = echarts.init(document.getElementById(id))
      const that=this;
      api.emotiondata().then(function (res) {
           if(res.status=="ok"){
              var ress=res.data;
               for(var i=0;i<ress.length;i++){
                  that.emodata.push(ress[i].name);
                  var emoobj={};
                  emoobj={
                     "value":ress[i].value,
                     "name":ress[i].name
                  }
                  that.emovalue.push(emoobj)
               }
           }
           console.log(that.emodata)
           console.log(that.emovalue)
           that.chart.setOption({
               tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    show: false,
                    x: 'left',
                    data: that.emodata
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['30%', '50%'],
                        labelLine: {
                            normal: {
                                length: 20,
                                length2: 70,
                                lineStyle: {
                                    color: '#333'
                                }
                            }

                        },
                        label: {
                            normal: {
                                formatter: '{b|{b}}{a|{d}%}\n\n',
                                borderWidth: 10,
                                borderRadius: 3,
                                // shadowBlur:3,
                                // shadowOffsetX: 2,
                                // shadowOffsetY: 2,
                                // shadowColor: '#999',
                                padding: [0, -90],
                                rich: {
                                    a: {
                                        color: 'pink',
                                        fontSize: 12,
                                        lineHeight: 10
                                    },
                                    b: {
                                        fontSize: 12,
                                        lineHeight: 10,
                                        color: 'red'
                                    }
                                }
                            }
                        },
                        data: that.emovalue
                    }
                ]

          })

      })


    }
  }
}
</script>
<style>
.hotword{width:90%;height:400px;}
</style>